<template>
  <div class="chart-container">
    <div ref="pieChart" class="chart"></div>
    <div ref="lineChart" class="chart"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const pieChart = ref(null)
const lineChart = ref(null)
let pieChartInstance = null
let lineChartInstance = null

const initPieChart = () => {
  pieChartInstance = echarts.init(pieChart.value)

  const pieOption = {
    title: {
      text: '扇形图示例',
      top: 'bottom',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '分类1' },
          { value: 735, name: '分类2' },
          { value: 580, name: '分类3' },
          { value: 484, name: '分类4' },
          { value: 300, name: '分类5' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  pieChartInstance.setOption(pieOption)
}

const initLineChart = () => {
  lineChartInstance = echarts.init(lineChart.value)

  const lineOption = {
    title: {
      text: '折线图示例',
      top: 'bottom',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }
    ]
  }

  lineChartInstance.setOption(lineOption)
}

onMounted(() => {
  initPieChart()
  initLineChart()
})

onBeforeUnmount(() => {
  if (pieChartInstance) {
    pieChartInstance.dispose()
  }
  if (lineChartInstance) {
    lineChartInstance.dispose()
  }
})
</script>

<style scoped>
.chart-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 400px;
}

.chart {
  width: 400px;
  height: 400px;
}
</style>
